import React, { Component } from 'react'
import { connect } from 'react-redux';
import styles from './ElSearchHistory.module.scss'
import store  from '../../../redux/store'
 class ElSearchHistory extends Component {
     
     state={
    
      clearAllHistory:false,
      clearAllItem:[],
     clearkeywordItem:''
     }
    handleClearOne=(index)=>{
       
        // console.log('删除',index);
        // this.props.keywordArr.splice(index,1)
       this.setState({
        clearkeywordItem:this.props.keywordArr.splice(index,1)
       })
       console.log(this.state.clearkeywordItem)
     
    }



    handleAll=()=>{
      this.props.clearAll(this.state.clearAllItem)
    console.log('清空历史');
    //  this.props.clearAllList(this.state.clearAllListItem)
    }
    render() {
            let length=this.props.keywordArr.length
            console.log(length);
        return (
            <div className={styles.elSearchHistoryBox+" "+(this.state.clearAllHistory?styles.itemHidden:styles.itemShow)}>   
         {/* <div>11111</div>
         <div>11111</div> <div>11111</div> <div>11111</div> <div>11111</div> */}
         {this.props.keywordArr&&this.props.keywordArr.map((v,index)=>{
             return <div className={styles.historyItemBox} key={index}>
                 <div className={styles.historyEveryItem}>{v.key}</div>
                <span className={styles.clearOneItem} onClick={this.handleClearOne.bind(this,v.id)} >X</span>
             </div>
         })} 
    

                <div className={styles.clearItem} onClick={this.handleAll}>清空历史</div>
               
            </div>
        )
    }
}
export default connect((state)=>{
    console.log(state);
    return {
        inputListArr:state.searchReducer.inputListArr
    }
},()=>{
    return {}
})(ElSearchHistory)



